define([
	"commonLet",
    "draggabilly",
    "jquery",
	"angular"
], function(commonLet, draggabilly) {
	// angular模块
	let appAngular = angular.module("bimApiAgular", []);
	appAngular.controller("bimApiCtrl", function($scope, $rootScope, $http) {
		// let
		// let
		// let
		// let-测试demo
		$scope.demo = "$scope.let.demo";
        // baseURL路径
        $scope.baseUrl = commonLet.BASEURL;
        $scope.ajaxUrl = commonLet.AJAXurl;
        $scope.imgIconModel = "/Module/demo181026/img/common/icon-model.png";
        // 侧栏相关
        // 侧栏是否展开
        $scope.sliderShrink = false;
		// 侧栏相关的数据
		$scope.modelSlider = [{
			title: "个人",
			fileName: [{
				img: "/Module/demo181026/img/common/icon-model.png",
				name: "模型名称一"
			}, {
				img: "/Module/demo181026/img/common/icon-model.png",
				name: "模型名称二"
			}, {
				img: "/Module/demo181026/img/common/icon-model.png",
				name: "模型名称三"
			}]
		}, {
			title: "公司项目",
			fileName: [{
				name: "项目名称一",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}, {
				name: "项目名称二",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}, {
				name: "项目名称三",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}]
		}, {
			title: "个人项目",
			fileName: [{
				name: "项目名称一",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}, {
				name: "项目名称二",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}, {
				name: "项目名称三",
				fileName: [{
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称一"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称二"
				}, {
					img: "/Module/demo181026/img/common/icon-model.png",
					name: "模型名称三"
				}]
			}]
		}];
        // 侧栏ajax数据
        $scope.modelSliderAjax = [];
        $scope.modelSliderAjaxLevel3 = [];
		// 底部按钮相关
		// 当前选中（当前点击）
		$scope.btnsSelect = "";
		// 选中添加样式名称（点击按钮高亮）
		$scope.btnEveryActive = "btn-every-active";
		// 底部按钮数据
		$scope.btnsMsg = [{
			id: "",
			name: "home",
			title: "主视角",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-1-home.png",
		}, {
			id: "",
			name: "property",
			title: "属性",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-2-property.png",
		}, {
			id: "",
			name: "structure",
			title: "模型结构",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-3-structure.png",
		}, {
			id: "",
			name: "eyesmark",
			title: "视角书签",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-4-eyesmark.png",
		}, {
			id: "",
			name: "search",
			title: "搜索",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-5-search.png",
		}, {
			id: "",
			name: "sign",
			title: "标注",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-6-sign.png",
		}, {
			id: "",
			name: "section",
			title: "剖切",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-7-section.png",
		}, {
			id: "",
			name: "measure",
			title: "测量",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-8-measure.png",
		}, {
			id: "",
			name: "location",
			title: "定位",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-9-location.png",
		}, {
			id: "",
			name: "3dbox",
			title: "3D框选（请按住ctrl 拖动）",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-10-3dbox.png",
		}, {
			id: "",
			name: "resolve",
			title: "分解",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-11-resolve.png",
		}, {
			id: "",
			name: "setting",
			title: "设置",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-12-setting.png",
		}, {
			id: "",
			name: "2d",
			title: "二维",
			isSelect: false,
			img: "/Module/demo181026/img/bottom-btns/btn-13-2d.png",
		}];
		// 可拖动模块-2、属性
		$scope.modelProperty = {
			search: '',
			property: [{
					name: '零件一',
					level: '1',
					data: [{
							name: '基本属性',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '模型-属性-内容',
                                ajaxTitle: false
							}]
						},
						{
							name: '尺寸标注',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '材质和装饰',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '标识数据',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '结构',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '阶段化',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '限制条件',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						}
					]
				},
				{
					name: '零件二',
					level: '1',
					data: [{
							name: '基本属性',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '尺寸标注',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '材质和装饰',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '标识数据',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '结构',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '阶段化',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						},
						{
							name: '限制条件',
							level: '2',
							data: [{
								img: '/Module/demo181026/img/common/file-files-little.png',
								title: '暂无数据',
                                ajaxTitle: false
							}]
						}
					]
				}
			]
		};
		// 可拖动模块-3、模型结构
		$scope.modelStructure = {
			titleMsg: {
				title: "模型结构",
				listMsg: ["模型结构", "标注", "视角书签"]
			},
			structure: [{
					name: "零件一",
					level: "1",
					data: [{
							name: "基本属性",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "尺寸标注",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "材质和装饰",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "标识数据",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "结构",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "阶段化",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						},
						{
							name: "限制条件",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型-属性-内容"
							}]
						}
					]
				},
				{
					name: "零件二",
					level: "1",
					data: [{
							name: "基本属性",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "尺寸标注",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "材质和装饰",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "标识数据",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "结构",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "阶段化",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						},
						{
							name: "限制条件",
							level: "2",
							data: [{
								img: "/Module/demo181026/img/common/icon-model.png",
								title: "模型名称"
							}]
						}
					]
				}
			],
			sign: {
				eyesOpen: true,
				color: ["#f65f74", "#9c4de6", "#3565ed", "#4ed390", "#f39846"],
				colorIndex: "#f65f74",
				colorClass: "color-fff",
				orderUp: true,
				search: "",
				data: [{
						eyesOpen: true,
						name: "标注名称",
						colorIndex: "#f65f74",
						edit: false,
						time: "2018-09-20",
						moreMsg: "标注名称标注名称标注名称标注名称标注名称标注名称",
					},
					{
						eyesOpen: false,
						name: "标注名称",
						colorIndex: "#f65f74",
						edit: false,
						time: "2018-09-20",
						moreMsg: "标注名称标注名称标注名称标注名称标注名称标注名称标注名称息",
					}
				]
			},
			eyesmark: {
				color: ["#f65f74", "#9c4de6", "#3565ed", "#4ed390", "#f39846"],
				colorIndex: "#f65f74",
				colorClass: "color-fff",
				orderUp: true,
				search: "",
				data: [{
						img: "/Module/demo181026/img/common/compass-circle.png",
						name: "视角名称",
						colorIndex: "#f65f74",
						edit: false,
						time: "2018-09-20",
						moreMsg: "视角名称视角名称视角名称视角名称视角名称视角名称视角名称视角名称视角名称视角名称",
					},
					{
						img: "/Module/demo181026/img/common/compass-circle.png",
						name: "视角名称",
						colorIndex: "#f65f74",
						edit: false,
						time: "2018-09-20",
						moreMsg: "视角名称视角名称视角名称视角名称视角名称视角名称视角名称视角名称",
					}
				]
			}
		};
		// 4、视角书签
		$scope.modelEyesmark = {
			name: '',
			comment: '',
			color: ['#f65f74', '#9c4de6', '#3565ed', '#4ed390', '#f39846'],
			colorIndex: '#f65f74'
		};
		// 模型中-5-搜索
		$scope.modelSearch = {
			searchScope: ['全局', '模型结构', '视角书签', '标注'],
			selectVal: '全局',
			searchVal: ''
		};
		// 模型中-6-标注属性
		$scope.modelSign = {
			name: '',
			comment: '',
			color: ['#f65f74', '#9c4de6', '#3565ed', '#4ed390', '#f39846'],
			colorIndex: '#f65f74'
		};
		// 模型中-7-剖切属性
		$scope.modeSection = {
			sectionWay: {
				x: 'X轴',
				y: 'Y轴',
				z: 'Z轴',
				box: '盒子'
			},
			section: 'box',
			coverage: ['图层一', '图层二', '图层三', '图层四', '图层五', '图层六'],
			select: '图层一'
		};
		// 模型中-11-分解属性
		$scope.modelResolve = {
			switch: false,
			x: '0',
			y: '0',
			z: '0'
		};
		// 模型中-12-设置属性
		$scope.modelSetting = {
			setting: "setComponent",
			setComponent: {
				isolation: true,
				show: false,
				glitter: false,
				box: false,
				areaCoverage: false,
				opacity: 100
			},
			setGlobal: {
				fullScreen: false,
				mouseHabit: 'left',
				bgColor: ['#f0f0f0', '#999999', '#4e6e8f', '#313e48', '#000000'],
				colorIndex: '#313e48',
				renders: 80
			}
		};
		// watch
		// watch
		// watch
        // 模型11、分解
        $scope.$watch("modelResolve.switch", function (newValue, oldValue) {
            newValue==true?Model.dismantle():Model.redismantle();
            // 模型分解
            // Model.dismantle()
            // 分解还原
            // Model.redismantle()
        });
        // 模型12、构件设置
        $scope.$watch("modelSetting.setComponent.isolation", function (newValue, oldValue) {
            newValue==true?Model.quarantine():"";
        }, true);
        $scope.$watch("modelSetting.setComponent.show", function (newValue, oldValue) {
            newValue==true?Model.showModel():Model.showHideModel();
        }, true);
        $scope.$watch("modelSetting.setComponent.box", function (newValue, oldValue) {
            newValue==true?Model.frame():Model.frame();
        }, true);
        $scope.$watch("modelSetting.setComponent.opacity", function (newValue, oldValue) {
            newValue!==oldValue?Model.opacity(newValue/100):"";
        }, true);

        /*$scope.$watch("modelSetting.setComponent", function (newValue, oldValue) {
            newValue.isolation==true?Model.quarantine():"";
            newValue.show==true?Model.showModel():Model.showHideModel();
            // newValue.glitter==true?Model.twinkle(name,time,callback):"";
            newValue.box==true?Model.frame():Model.frame();
            // newValue.areaCoverage==true?Model.hidePlane(true):Model.hidePlane(false);
            newValue.opacity!==oldValue.opacity?Model.opacity(newValue.opacity/100):"";
            // 隔离
            // Model.quarantine()

            // 构件闪烁
            // Model.twinkle(name,time,callback)
            // 注:该方法有三个参数，其中name为必选，其他为可选。
            // 1.name 模型的名字
            // 2.time 闪烁频率
            // 3.callback 回调方法

            // 模型单个显隐
            // Model.showHideModel()
            // 注：该方法没有参数。

            // 显示全部模型
            // Model.showModel()
            // 注：该方法没有参数。

            // 线框显示
            // Model.frame()
            // 注：该方法没有参数。

            // 重置线框
            // Model.resetFrame()
            // 注：该方法没有参数。

            //查看平面图层
            // Model.viewPlane(boolean,value)
            // 注：  1.Boolean值类型
            // 2.true用于控制开启
            // 3.false用于控制关闭
            // 4.value传入对应的图层编码

            //隐藏平面图层
            // Model.hidePlane(boolean)
            // 注：1.Boolean值类型
            // 2.true用于控制开启
            // 3.false用于控制关闭

            //移除当前的平面图层
            // Model.removePlane()
            // 注：该方法没有参数。

            //透明度设置
            // Model.opacity(value)
            // 注：参数为数值类型，数值范围0-1。

            //透明度恢复
            // Model.reopacity()
            // 注：该方法没有参数。
        }, true);*/
        // 模型12、全局设置
        $scope.$watch("modelSetting.setGlobal", function (newValue, oldValue) {
            if (newValue.mouseHabit!==oldValue.mouseHabit) {
                newValue.mouseHabit=="left"?Model.changeHabit(0):Model.changeHabit(2);
            }
            newValue.colorIndex!==oldValue.colorIndex?Model.changeColor(newValue.colorIndex):"";
            //更换Canvas背景色
            // Model.changeColor(color)
            // 注：参数为颜色值，这里的color是一个16进制颜色。

            //更换鼠标习惯
            // Model.changeHabit(value)
            // 注：1.参数为0,2数值。
            // 2.参数为0是默认左键
        },true);
        // $http
        // $http
        // $http
        // 侧栏目录数据
        // 第二级目录
        // http://192.168.2.119:8085/ltlj
        $http({
            method: 'GET',
            url: $scope.ajaxUrl + '/ltlj?lid=1'
        }).then(function successCallback(response) {
            // console.log(response.data);
            // 1:{id: "5c249ba63143b434b4581230", name: "IfcRoof"}
            for (let i = 0; i < response.data.length; i++) {
                let dataList = {
                    index: i,
                    id: response.data[i].id,
                    name: response.data[i].name
                };
                $scope.modelSliderAjax.push(dataList);
            }
            console.log($scope.modelSliderAjax);
            console.warn('三级目录填充：填装格式');
            for (let i = 0; i < $scope.modelSliderAjax.length; i++) {
                $scope.modelSliderAjaxLevel3.push([]);
            }
        }, function errorCallback(response) {
            // 请求失败执行代码
            console.error("初始化：侧栏目录：ajax请求失败");
        });
        // 第三级目录
        $scope.ajaxModelSliderLevel3 = function(index, id) {
            /*if ($scope.modelSliderAjaxLevel3 == null) {
                console.error('$scope.modelSliderAjaxLevel3是null');
                for (let i = 0; i < $scope.modelSliderAjax.length; i++) {
                    $scope.modelSliderAjaxLevel3.push([]);
                }
            } else {
                console.error('$scope.modelSliderAjaxLevel3不是null');
                if ($scope.modelSliderAjaxLevel3[index] == null) {
                    // http://192.168.2.119:8085/ltlq?id=5c249ba63143b434b4581230
                    $http({
                        method: 'GET',
                        url: $scope.ajaxUrl + '/ltlq?lid=1&&id=' + id
                    }).then(function successCallback(response) {
                        // console.log(response.data);
                        // [
                        // {"name":"屋顶 7:屋顶 1:1005111","id":"1POARy_JzFyxk1cGpThXbs"},
                        // {"name":"屋顶 8:屋顶 2:1005235","id":"1POARy_JzFyxk1cGpThXdo"},
                        // {"name":"屋顶 9:屋顶 3:1005432","id":"1POARy_JzFyxk1cGpThXWv"}
                        // ]
                        let levelLists = [];
                        for (let j = 0; j < response.data.length; j++) {
                            let levelList = {
                                id: id,
                                nid: response.data[j].id,
                                name: response.data[j].name
                            };
                            levelLists.push(levelList);
                        }
                        $scope.modelSliderAjaxLevel3.splice(index, 1, levelLists);
                        console.log($scope.modelSliderAjaxLevel3);
                    }, function errorCallback(response) {
                        // 请求失败执行代码
                        console.error("初始化：侧栏目录：ajax请求失败");
                    });
                }
            }*/
            if ($scope.modelSliderAjaxLevel3.length !== $scope.modelSliderAjax.length) {
                console.error("二级目录加载失败");
                return;
            } else {
                console.warn('三级目录填充：ajax请求数据');
                if ($scope.modelSliderAjaxLevel3[index].length == 0) {
                    console.warn('第一次请求ajax');
                    // ../ltlq?id=5c249ba63143b434b4581230
                    $http({
                        method: 'GET',
                        url: $scope.ajaxUrl + '/ltlq?lid=1&&id=' + id
                    }).then(function successCallback(response) {
                        // console.log(response.data);
                        // [
                        // {"name":"屋顶 7:屋顶 1:1005111","id":"1POARy_JzFyxk1cGpThXbs"},
                        // {"name":"屋顶 8:屋顶 2:1005235","id":"1POARy_JzFyxk1cGpThXdo"},
                        // {"name":"屋顶 9:屋顶 3:1005432","id":"1POARy_JzFyxk1cGpThXWv"}
                        // ]
                        let levelLists = [];
                        for (let j = 0; j < response.data.length; j++) {
                            let levelList = {
                                id: id,
                                nid: response.data[j].id,
                                name: response.data[j].name,
                                check: false
                            };
                            levelLists.push(levelList);
                        }
                        $scope.modelSliderAjaxLevel3.splice(index, 1, levelLists);
                        console.log($scope.modelSliderAjaxLevel3);
                    }, function errorCallback(response) {
                        // 请求失败执行代码
                        console.error("初始化：侧栏目录：ajax请求失败");
                    });
                } else {
                    console.error("非第一次请求ajax");
                }
            }
        };
        // 模型属性
        $scope.ajaxModelSliderProperty = function(id, nid) {
            // http://192.168.2.20:8085/ltlm?id=5c249b463143b434b458122c&&nid=1POARy_JzFyxk1cGpThXT2
            $http({
                method: 'GET',
                url: $scope.ajaxUrl + '/ltlm?lid=1&&id=' + id + '&&nid=' + nid
            }).then(function successCallback(response) {
                // console.log(response.data);
                $scope.modelProperty.property[0].data[0].data[0].ajaxTitle = true;
                // console.log($scope.modelProperty.property[0].data[0].data[0].ajaxTitle)
                // {
                // "_id":"5c2356b9ac8e9538a02466c4",
                // "id":"1POARy_JzFyxk1alBThXT2",
                // "Name":"Pset_WindowCommon",
                // "IfcPropertySingleValue":
                //  [
                //      {"Name":"IsExternal","NominalValue":true},
                //      {"Name":"Reference","NominalValue":"窗3600x3600"}
                //  ]
                // }
                $scope.modelProperty.property[0].data[0].data[0].title = [response.data[0]];
                console.log($scope.modelProperty.property[0].data[0].data[0].title);
            }, function errorCallback(response) {
                // 请求失败执行代码
                console.error("初始化：侧栏目录：ajax请求失败");
            });
        };
        // 结构树和模型对应
        $scope.modelSliderToModel = function(nid) {
            Model.location([nid]);
        };
		// function
		// function
		// function
		// function-测试demo
		$scope.modelDemo = function() {
			console.log("$scope.functon.demo")
		};
        // 侧栏收缩
        $scope.modelSliderShrink = function() {
            $scope.sliderShrink = true;
            $(".BIMView-API-content .BIMView-API-slider").css({
                "-webkit-animation": "sliderShrink 300ms forwards",
                "-moz-animation": "sliderShrink 300ms forwards",
                "-ms-animation": "sliderShrink 300ms forwards",
                "animation": "sliderShrink 300ms forwards"
            });
        };
        // 侧栏展开
        $scope.modelSliderSpread = function() {
            $scope.sliderShrink = false;
            $(".BIMView-API-content .BIMView-API-slider").css({
                "-webkit-animation": "sliderSpread 300ms forwards",
                "-moz-animation": "sliderSpread 300ms forwards",
                "-ms-animation": "sliderSpread 300ms forwards",
                "animation": "sliderSpread 300ms forwards"
            });
        };
		// 底部按钮点击事件
		$scope.bottomBtnsClick = function(item, index) {
			$scope.btnsSelect = item.name;
			console.log(item, index);
			console.log($scope.btnsSelect);
            // 模型加载
            // Model.load  (url)
            // 注：该方法传入后台模型接口url。
            if (Model) {
                // 标注
                Model.singer(false);
                Model.singerCancal();
                // 剖切
                Model.clip(false);
            }
            switch (index){
                case 0:
                    // 主视角
                    Model.reset();
                    break;
                case 1:
                    // 属性
                    break;
                case 2:
                    // 模型结构
                    break;
                case 3:
                    // 视角书签
                    //保存视角书签
                    // Model.saveMark(name,callback)
                    // 注：参数有两个，name和callback
                    // 1.name设置标签的名称
                    // 2.callback是标签的回调函数，用于设置标签的其他内容，callback接受一个参数，参数对象的url为截屏缩略图。

                    //提取视角书签
                    // Model.parseMark(markJson)
                    // 注:参数为一个json,这里为存入数据库的视角数据
                    break;
                case 4:
                    // 搜索
                    break;
                case 5:
                    // 标注
                    Model.singer(true);
                    break;
                case 6:
                    // 剖切
                    Model.clip(true);
                    //层间滑动
                    // Model.slide(value)
                    // 注：该方法传入一个value对象，value中包含x,y,z三个属性。
                    // 1.x控制X方向平移
                    // 2.y控制Y方向平移
                    // 3.z控制Z方向平移

                    // 层间滑动重置
                    // Model.resetSlide()
                    // 注：该方法没有参数。
                    break;
                case 7:
                    // 测量
                    Model.measure(true);
                    break;
                case 8:
                    // 定位
                    /*if (API.object && API.object.name) {
                        API.location([API.object.name]);
                    }*/
                    // API.changeCamera();
                    break;
                case 9:
                    // 3D框选（请按住ctrl 拖动）
                    // API.frame();
                    break;
                case 10:
                    // 分解
                    break;
                case 11:
                    // 设置
                    break;
                case 12:
                    // 二维
                    break;
                case 13:
                    // 暂时是空的
                    break;
                default:
                    // 暂时只有13个，so：case：13是空的
                    break;
            }
		};
		// 点击可拖动模块中的“X”，关闭弹层的时候，$scope.btnsSelect的值清空
		$scope.modelDragTitleClose = function() {
			$scope.btnsSelect = "";
			if (Model) {
			    // 标注
                Model.singer(false);
                Model.singerCancal();
			    // 剖切
                Model.clip(false);
            }
		};
		// 3、模型结构，下拉切换
		$scope.modelStructureDropdownSelect = function(select) {
			$scope.modelStructure.titleMsg.title = select;
		};
		// 3、模型结构-标注、颜色选择切换（后续其他组件可能公用???）
		// 用到的组件：3、模型结构-标注；3、模型结构-视角书签；4、视角书签；6、标注；12、设置
		$scope.modelChooseColorIndex = function(item, color) {
			item.colorIndex = color;
		};
		// 3、模型结构-标注、眼睛开闭状态
		$scope.modelStructureSigneyesOpen = function() {
			$scope.modelStructure.sign.eyesOpen = !$scope.modelStructure.sign.eyesOpen;
		};
		// 3、模型结构-标注、排序状态
		$scope.modelStructureSignOrderUp = function(order) {
			order.orderUp = !order.orderUp;
		};
		// 3、模型结构-标注+视角书签、是否可以编辑状态
		$scope.modelStructureEdit = function(item) {
			item.edit = !item.edit;
		};
		// 5、搜索、下拉选择
		$scope.modelSearchDropdownSelect = function(select) {
			$scope.modelSearch.selectVal = select;
		};
		// 7、剖切、下拉-图层选择
		$scope.modelSectionDropdownSelect = function(select) {
			$scope.modeSection.select = select;
		};
		// 11、分解、数据重置
		$scope.modelResolveReset = function() {
			$scope.modelResolve.switch = false;
			$scope.modelResolve.x = '0';
			$scope.modelResolve.y = '0';
			$scope.modelResolve.z = '0';
		};
		// 12、设置、title、两个设置切换
		$scope.modelSettingTitleSelect = function(select) {
			$scope.modelSetting.setting = select;
		};
		// 12、设置、两个重置
		$scope.modelSettingsetComponentReset = function() {
			$scope.modelSetting.setComponent.isolation = true;
			$scope.modelSetting.setComponent.show = false;
			$scope.modelSetting.setComponent.glitter = false;
			$scope.modelSetting.setComponent.box = false;
			$scope.modelSetting.setComponent.areaCoverage = false;
			$scope.modelSetting.setComponent.opacity = 100;
		};
		$scope.modelSettingsetGlobalReset = function() {
			$scope.modelSetting.setGlobal.fullScreen = false;
			$scope.modelSetting.setGlobal.mouseHabit = 'left';
			$scope.modelSetting.setGlobal.colorIndex = '#313e48';
			$scope.modelSetting.setGlobal.renders = 80;
		};
	});
	// 组件封装
    // 侧栏-组件最外层（外部）
    appAngular.directive("bimviewApiSlider", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class="BIMView-API-slider">
                        <div bim-api-slider></div>
					</div>`,
            link: function($scope, $elem, attrs) {
                $elem.on("click", function() {
                    // console.log($elem);
                });
            }
        };
    });
    // 底部-组件最外层（外部）
    appAngular.directive("bimviewApiBottom", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class="BIMView-API-bottom">
                        <div bim-api-bottom></div>
					</div>`,
            link: function($scope, $elem, attrs) {
                $elem.on("click", function() {
                    $scope.modelSliderShrink();
                    $scope.$apply();
                });
            }
        };
    });
    // 拖动模块-组件最外层（外部）
    appAngular.directive("bimviewApiDrag", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class="BIMView-API-drag">
                        <!-- 2、属性 -->
                        <div bim-api-model-property></div>
                        <!-- 3、模型结构 -->
                        <div bim-api-model-structure></div>
                        <!-- 4、视角书签 （和6、标注；公用一套CSS）-->
                        <div bim-api-model-eyesmark></div>
                        <!-- 5、搜索 -->
                        <div bim-api-model-search></div>
                        <!-- 6、标注 -->
                        <div bim-api-model-sign></div>
                        <!-- 7、剖切 -->
                        <div bim-api-model-section></div>
                        <!-- 9、定位 -->
                        <div bim-api-model-location></div>
                        <!-- 11、分解 -->
                        <div bim-api-model-resolve></div>
                        <!-- 12、设置 -->
                        <div bim-api-model-setting></div>"
					</div>`,
            link: function($scope, $elem, attrs) {
                $elem.on("click", function() {
                    $scope.modelSliderShrink();
                    $scope.$apply();
                });

                // 拖动方法初始化（纯js调用三种方法+可查看方法的地址）
                // http://www.htmleaf.com/jQuery/Layout-Interface/201509142570.html
                // 第一种方法
                /*var elem = document.querySelector('.draggable');
                var draggie = new Draggabilly( elem, {
                  // options...
                });*/

                // 第二种方法
                /*let dragModule = new draggabilly('.draggable', {
                    containment: true
                });*/

                // 第三种方法;get all draggie elements
                let draggableElems = document.querySelectorAll('.draggable');
                let draggies = [];
                for (let i = 0, len = draggableElems.length; i < len; i++) {
                    let draggableElem = draggableElems[i];
                    let draggie = new draggabilly(draggableElem, {
                        containment: true
                    });
                    draggies.push(draggie);
                }
            }
        };
    });
    // 模型canvas-组件最外层（外部）
    appAngular.directive("bimviewApiCanvas3d", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class='BIMView-API-canvas3d' id='Canvas'>
					</div>`,
            link: function($scope, $elem, attrs) {
                $elem.on("click", function() {
                    $scope.modelSliderShrink();
                    $scope.$apply();
                });
            }
        };
    });
	// 侧栏组件（内部）
	appAngular.directive("bimApiSlider", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="model-slider">
						<div class="model-slider-content">
							<!--<details>
								<summary>{{modelSlider[0].title}}</summary>
								<p ng-repeat="item in modelSlider[0].fileName">
									<img ng-src="{{baseUrl+item.img}}" />
									<span>{{item.name}}</span>
								</p>
							</details>
							<details>
								<summary>{{modelSlider[1].title}}</summary>
								<details ng-repeat="item in modelSlider[1].fileName">
									<summary>{{item.name}}</summary>
									<p ng-repeat="list in item.fileName">
										<img ng-src="{{baseUrl+list.img}}" />
										<span>{{list.name}}</span>
									</p>
								</details>
							</details>-->
							<details ng-if="modelSliderAjax[0]" open>
								<summary>模型结构</summary>
								<details ng-repeat="item in modelSliderAjax">
									<summary ng-click="ajaxModelSliderLevel3(item.index, item.id)">{{item.name}}</summary>
									<p ng-repeat="list in modelSliderAjaxLevel3[item.index]">
										<img ng-src="{{baseUrl+imgIconModel}}" />
										<span ng-click="ajaxModelSliderProperty(list.id, list.nid); 
										    modelSliderToModel(list.nid)">{{list.name}}</span>
									</p>
								</details>
							</details>
							<details ng-if="!modelSliderAjax[0]">
								<summary>暂无数据</summary>
								<p>
									<img ng-src="{{baseUrl+imgIconModel}}" />
									<span>暂无数据</span>
								</p>
							</details>
						</div>
						<div class="model-slider-shrink">
					    	<img ng-if="!sliderShrink" ng-src="{{baseUrl}}/Module/demo181026/img/common/previous.png" 
					    	ng-click="modelSliderShrink()">
					    	<img ng-if="sliderShrink" ng-src="{{baseUrl}}/Module/demo181026/img/common/spread-right.png" 
					    	ng-click="modelSliderSpread()">
					    </div>
				    </div>`,
		};
	});
	// 底部按钮组件（内部）
	appAngular.directive("bimApiBottom", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="model-bottom-content">
						<div class="bottom-bg"></div>
							<div ng-repeat="item in btnsMsg" class="btn-every {{item.name==btnsSelect?btnEveryActive:null}}" 
							title="{{item.title + item.name + $index}}" name="{{$index}}" ng-click="bottomBtnsClick(item, $index)">
							<img ng-src="{{baseUrl+item.img}}" />
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-2、属性
	appAngular.directive("bimApiModelProperty", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-property" style="display: {{(btnsSelect=='property')?'block':'none'}}">
						<div class="property-header">
							<h3>属性</h3>
							<img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
						</div>
						<div class="property-content">
							<details open="open" ng-repeat="item in modelProperty.property">
								<summary style="color: #0696FA;">{{item.name}}</summary>
								<details ng-repeat="itemList in item.data" ng-if="$first" open>
									<summary>{{itemList.name}}</summary>
									<p ng-repeat="data in itemList.data" ng-if="!data.ajaxTitle">
										<img ng-src="{{baseUrl+data.img}}">
										<span>{{data.title}}</span>
									</p>
									 <table ng-repeat="data in itemList.data" ng-if="data.ajaxTitle">
                                        <tr ng-repeat="show in data.title[0].IfcPropertySingleValue"
                                        	ng-if="!data.title[0].IfcPropertySingleValue.Name">
                                            <td>{{show.Name}}</td>
                                            <td>{{show.NominalValue}}</td>
                                        </tr>
                                        <tr ng-if="data.title[0].IfcPropertySingleValue.Name">
                                            <td>{{data.title[0].IfcPropertySingleValue.Name}}</td>
                                            <td>{{data.title[0].IfcPropertySingleValue.NominalValue}}</td>
                                        </tr>
                                    </table>
								</details>
								<details ng-repeat="itemList in item.data" ng-if="!$first">
									<summary>{{itemList.name}}</summary>
									<p ng-repeat="data in itemList.data" ng-if="!data.ajaxTitle">
										<img ng-src="{{baseUrl+data.img}}">
										<span>{{data.title}}</span>
									</p>
									 <table ng-repeat="data in itemList.data" ng-if="data.ajaxTitle">
                                        <tr ng-repeat="show in data.title[0].IfcPropertySingleValue"
                                        	ng-if="!data.title[0].IfcPropertySingleValue.Name">
                                            <td>{{show.Name}}</td>
                                            <td>{{show.NominalValue}}</td>
                                        </tr>
                                        <tr ng-if="data.title[0].IfcPropertySingleValue.Name">
                                            <td>{{data.title[0].IfcPropertySingleValue.Name}}</td>
                                            <td>{{data.title[0].IfcPropertySingleValue.NominalValue}}</td>
                                        </tr>
                                    </table>
								</details>
							</details>
						</div>
						<div class="property-search">
							<div class="search-btn">
								<label class="search-label">
				            <img src="{{baseUrl}}/Module/demo181026/img/common/search.png">
				            <input type="text" placeholder="搜索内容" ng-model="modelProperty.search">
				          </label>
								<button>搜索</button>
							</div>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-3、模型结构
	appAngular.directive("bimApiModelStructure", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-structure" style="display: {{(btnsSelect=='structure')?'block':'none'}}">
						<div class="model-drag-head">
							<div class="dropdown">
								<button class="dropbtn" title="{{modelStructure.titleMsg.title}}">
									<span class="dropbtn-text">{{modelStructure.titleMsg.title}}</span>
								</button>
								<div class="dropdown-content">
									<a ng-repeat="item in modelStructure.titleMsg.listMsg" ng-click="modelStructureDropdownSelect(item)">{{item}}</a>
								</div>
							</div>
							<img class="model-drag-head-img-close" 
							ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()" />
						</div>
						<div class="model-drag-content">
							<div class="model-structure-structure" ng-if="modelStructure.titleMsg.title=='模型结构'">
								<details open="open" ng-repeat="item in modelStructure.structure">
									<summary style="color: #0696FA;">{{item.name}}</summary>
									<details ng-repeat="itemList in item.data">
										<summary>{{itemList.name}}</summary>
										<p ng-repeat="data in itemList.data">
											<img ng-src="{{baseUrl+data.img}}">
											<span>{{data.title}}</span>
										</p>
									</details>
								</details>
							</div>
							<div class="model-structure-sign" ng-if="modelStructure.titleMsg.title=='标注'">
								<div class="structure-sign-content">
									<div class="sign-header">
										<div class="eyes-img">
											<img ng-src="{{baseUrl}}/Module/demo181026/img/common/{{modelStructure.sign.eyesOpen?'eyes-open.png':'eyes-close.png'}}" ng-click="modelStructureSigneyesOpen()">
										</div>
										<span>全部</span>
										<div class="color-content">
											<span ng-repeat="color in modelStructure.sign.color" 
												style="border-color: {{color}}; background-color: {{color}};" 
												class="color-level" 
												ng-class="modelStructure.sign.colorIndex!==color?modelStructure.sign.colorClass:null " 
												ng-click="modelChooseColorIndex(modelStructure.sign, color)">
											</span>
										</div>
										<img ng-src="{{baseUrl}}/Module/demo181026/img/common/{{modelStructure.sign.orderUp?'order-up.png':'order-down.png'}}" 
											ng-click="modelStructureSignOrderUp(modelStructure.sign)">
									</div>
									<div class="sign-show">
										<div class="sign-every" ng-repeat="sign in modelStructure.sign.data">
											<div class="sign-every-show" ng-if="!sign.edit">
												<table>
													<tr>
														<td rowspan="3" colspan="3">
															<img class="sign-img-small" ng-src="{{baseUrl}}/Module/demo181026/img/common/{{sign.eyesOpen?'eyes-open.png':'eyes-close.png'}}">
														</td>
														<th>{{sign.name}}</th>
														<td><img ng-src="{{baseUrl}}/Module/demo181026/img/common/edit-on.png" class="edit-sign" ng-click="modelStructureEdit(sign)">
														</td>
													</tr>
													<tr>
														<td><span style="background-color: {{sign.colorIndex}}"></span></td>
														<td>{{sign.time}}</td>
													</tr>
													<tr>
														<td colspan="2">{{sign.moreMsg}}</td>
													</tr>
												</table>
											</div>
											<div class="sign-every-edit" ng-if="sign.edit">
												<div class="sign-edit-header">
													<input type="text" placeholder="输入标题" ng-model="sign.name">
													<div class="color-level-check">
														<div ng-repeat="bgColor in modelStructure.sign.color" 
															class="color-every {{sign.colorIndex==bgColor?'color-every-active':null}}" 
															ng-click="modelChooseColorIndex(sign, bgColor)">
															<span style="background-color: {{bgColor}}"></span>
														</div>
													</div>
												</div>
												<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="sign.moreMsg" ng-click="GetFocus($event)"></textarea>
												<div class="function-btn">
													<button ng-click="modelStructureEdit(sign)">删除本条</button>
													<button ng-click="modelStructureEdit(sign)">完成</button>
													<button ng-click="modelStructureEdit(sign)">取消</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="model-structure-eyesmark" ng-if="modelStructure.titleMsg.title=='视角书签'">
								<div class="structure-eyesmark-content">
									<div class="eyesmark-header">
										<span>全部</span>
										<div class="color-content">
											<span ng-repeat="color in modelStructure.eyesmark.color" 
												style="border-color: {{color}}; background-color: {{color}};" 
												class="color-level" 
												ng-class="modelStructure.eyesmark.colorIndex!==color?modelStructure.eyesmark.colorClass:null " 
												ng-click="modelChooseColorIndex(modelStructure.eyesmark, color)">
											</span>
										</div>
										<img ng-src="{{baseUrl}}/Module/demo181026/img/common/{{modelStructure.eyesmark.orderUp?'order-up.png':'order-down.png'}}" 
											ng-click="modelStructureSignOrderUp(modelStructure.eyesmark)">
									</div>
									<div class="eyesmark-show">
										<div class="eyesmark-every" ng-repeat="eyesmark in modelStructure.eyesmark.data">
											<div class="eyesmark-every-show" ng-if="!eyesmark.edit">
												<table>
													<tr>
														<td rowspan="2"><img ng-src="{{baseUrl+eyesmark.img}}" class="eyesmark-img-small"></td>
														<th>{{eyesmark.name}}</th>
														<td><img ng-src="{{baseUrl}}/Module/demo181026/img/common/edit-on.png" class="edit-eyesmark" ng-click="modelStructureEdit(eyesmark)">
														</td>
													</tr>
													<tr>
														<td><span style="background-color: {{eyesmark.colorIndex}}"></span></td>
														<td>{{eyesmark.time}}</td>
													</tr>
													<tr>
														<td colspan="3">{{eyesmark.moreMsg}}</td>
													</tr>
												</table>
											</div>
											<div class="eyesmark-every-edit" ng-if="eyesmark.edit">
												<div class="eyesmark-edit-header">
													<img ng-src="{{baseUrl+eyesmark.img}}">
													<input type="text" placeholder="输入标题" ng-model="eyesmark.name">
													<div class="color-level-check">
														<div ng-repeat="bgColor in modelStructure.eyesmark.color"
															class="color-every" 
															ng-class="eyesmark.colorIndex==bgColor?'color-every-active':null" 
															ng-click="modelChooseColorIndex(eyesmark, bgColor)">
															<span style="background-color: {{bgColor}}"></span>
														</div>
													</div>
												</div>
												<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="eyesmark.moreMsg"></textarea>
												<div class="function-btn">
													<button ng-click="modelStructureEdit(eyesmark)">删除本条</button>
													<button ng-click="modelStructureEdit(eyesmark)">完成</button>
													<button ng-click="modelStructureEdit(eyesmark)">取消</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="model-drag-foot">
							<div class="foot-search-content">
								<label>
									<img src="{{baseUrl}}/Module/demo181026/img/common/search.png" />
									<input type="text" placeholder="搜索内容" />
								</label>
								<button>搜索</button>
							</div>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					//console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-4、视角书签
	appAngular.directive("bimApiModelEyesmark", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-sign" style="display: {{btnsSelect=='eyesmark'?'block':'none'}}">
						<input type="text" placeholder="输入标题" ng-model="modelEyesmark.name">
						<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="modelEyesmark.comment"></textarea>
						<div class="sign-color">
							<span>选择书签颜色：</span>
							<div class="sign-color-content">
								<div ng-repeat="color in modelEyesmark.color" 
									class="sign-color-index {{modelEyesmark.colorIndex==color?'sign-color-active':null}}" 
									ng-click="modelChooseColorIndex(modelEyesmark, color)">
									<span style="background-color: {{color}}"></span>
								</div>
							</div>
						</div>
						<div class="sign-btn">
							<button>保存</button>
							<button ng-click="modelDragTitleClose()">取消</button>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-5、搜索
	appAngular.directive("bimApiModelSearch", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-search" style="display: {{btnsSelect=='search'?'block':'none'}}">
						<div class="search-header">
							<div class="dropdown">
								<button class="dropbtn" title="{{modelSearch.selectVal}}">
									<span class="dropbtn-text">{{modelSearch.selectVal}}</span>
								</button>
								<div class="dropdown-content">
									<a ng-repeat="item in modelSearch.searchScope" ng-click="modelSearchDropdownSelect(item)">{{item}}</a>
								</div>
							</div>
							<div class="search-input">
								<label>
				            		<img src="{{baseUrl}}/Module/demo181026/img/common/search.png">
				            		<input type="text" placeholder="搜索内容" ng-model="modelSearch.searchVal">
				          		</label>
								<button>搜索</button>
							</div>
							<img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-6、标注
	appAngular.directive("bimApiModelSign", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-sign" style="display: {{btnsSelect=='sign'?'block':'none'}}">
						<input type="text" placeholder="输入标题" ng-model="modelSign.name">
						<textarea placeholder="输入备注信息" rows="4" maxlength="50" ng-model="modelSign.comment"></textarea>
						<div class="sign-color">
							<span>选择标记颜色：</span>
							<div class="sign-color-content">
								<div ng-repeat="color in modelSign.color" 
									class="sign-color-index {{modelSign.colorIndex==color?'sign-color-active':null}}" 
									ng-click="modelChooseColorIndex(modelSign, color)">
									<span style="background-color: {{color}}"></span>
								</div>
							</div>
						</div>
						<div class="sign-btn">
							<button>保存</button>
							<button ng-click="modelDragTitleClose()">取消</button>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-7、剖切
	appAngular.directive("bimApiModelSection", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-section" style="display: {{btnsSelect=='section'?'block':'none'}}">
					    <div class="section-header">
					    	<h3>剖切</h3>
					        <img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
					    </div>
					    <div class="section-content">
					        <div class="section-every">
					          	<span>剖切轴：</span>
					          	<div class="section-way">
						            <label>
						              	<input type="radio" name="sectionWay" class="k-radio" value="x" ng-model="modeSection.section"/>
						              	<span class="k-radio-label">X轴</span>
						            </label>
						            <label>
						              	<input type="radio" name="sectionWay" class="k-radio" value="y" ng-model="modeSection.section"/>
						              	<span class="k-radio-label">Y轴</span>
						            </label>
						            <label>
						              	<input type="radio" name="sectionWay" class="k-radio" value="z" ng-model="modeSection.section"/>
						              	<span class="k-radio-label">Z轴</span>
						            </label>
						            <label>
						              	<input type="radio" name="sectionWay" class="k-radio" value="box" ng-model="modeSection.section"/>
						              	<span class="k-radio-label">盒子</span>
						            </label>
					          	</div>
					        </div>
					        <div class="section-every">
					          	<span>图层：</span>
					          	<div class="dropdown">
									<button class="dropbtn" title="{{modeSection.select}}">
										<span class="dropbtn-text">{{modeSection.select}}</span>
									</button>
									<div class="dropdown-content">
										<a ng-repeat="item in modeSection.coverage" ng-click="modelSectionDropdownSelect(item)">{{item}}</a>
									</div>
								</div>
				        	</div>
				      	</div>
				    </div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-9、定位
	appAngular.directive("bimApiModelLocation", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-location" style="display: {{btnsSelect=='location'?'block':'none'}}">
						<div class="location-header">
							<h3>定位</h3>
							<div class="dropdown">
								<button class="dropbtn" title="{{modeSection.select}}">
									<span class="dropbtn-text">{{modeSection.select}}</span>
								</button>
								<div class="dropdown-content">
									<a ng-repeat="item in modeSection.coverage" ng-click="modelSectionDropdownSelect(item)">{{item}}</a>
								</div>
							</div>
							<div class="header-img">
								<img ng-src="{{baseUrl}}/Module/demo181026/img/common/zoom-up.png">
								<img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
							</div>
						</div>
						<div class="location-content">
							<div class="location-demo">
							</div>
							<div class="location-compass">
								<img src="{{baseUrl}}/Module/demo181026/img/common/compass-north.png">
							</div>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-11、分解
	appAngular.directive("bimApiModelResolve", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-resolve" ng-if="btnsSelect=='resolve'">
						<div class="resolve-header">
							<h3>分解</h3>
							<img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
						</div>
						<div class="resolve-content">
							<div class="resolve-every">
								<span>分解:</span>
								<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelResolve.switch">
							</div>
							<div class="resolve-every">
								<span>X轴:</span>
								<input type="range" min="-100" max="100" step="10" ng-model="modelResolve.x">
								<span>{{modelResolve.x}}</span>
							</div>
							<div class="resolve-every">
								<span>Y轴:</span>
								<input type="range" min="0" max="100" step="10" ng-model="modelResolve.y">
								<span>{{modelResolve.y}}</span>
							</div>
							<div class="resolve-every">
								<span>Z轴:</span>
								<input type="range" min="-100" max="100" step="10" ng-model="modelResolve.z">
								<span>{{modelResolve.z}}</span>
							</div>
						</div>
						<div class="resolve-btn">
							<button ng-click="modelResolveReset()">重置</button>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	// 底部按钮先关-可拖动模块-12、设置
	appAngular.directive("bimApiModelSetting", function() {
		return {
			restrict: "EA",
			replace: true,
			template: `<div class="draggable model-setting" ng-if="btnsSelect=='setting'">
						<div class="setting-header">
							<h3>设置</h3>
							<img ng-src="{{baseUrl}}/Module/demo181026/img/common/close.png" ng-click="modelDragTitleClose()">
						</div>
						<div class="model-setting-content">
							<div class="model-setting-content-header">
								<button class="{{modelSetting.setting=='setComponent'?'setting-button-active':null}}" 
									ng-click="modelSettingTitleSelect('setComponent')">构建设置</button>
								<button class="{{modelSetting.setting=='setGlobal'?'setting-button-active':null}}" 
									ng-click="modelSettingTitleSelect('setGlobal')">全局设置</button>
							</div>
							<div class="model-setting-content-setComponent" ng-if="modelSetting.setting=='setComponent'">
								<div class="setting-every">
									<span>隔离:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setComponent.isolation">
								</div>
								<div class="setting-every">
									<span>显示:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setComponent.show">
								</div>
								<div class="setting-every">
									<span>闪烁:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setComponent.glitter">
								</div>
								<div class="setting-every">
									<span>线框:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setComponent.box">
								</div>
								<div class="setting-every">
									<span>区域图层:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setComponent.areaCoverage">
								</div>
								<div class="setting-every setting-every-last">
									<span>透明度:</span>
									<input type="range" min="0" max="100" step="1" ng-model="modelSetting.setComponent.opacity">
									<span>{{modelSetting.setComponent.opacity}}%</span>
								</div>
								<div class="setting-btn">
									<button ng-click="modelSettingsetComponentReset()">恢复默认设置</button>
								</div>
							</div>
							<div class="model-setting-content-setGlobal" ng-if="modelSetting.setting=='setGlobal'">
								<div class="setting-every">
									<span>全屏:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" ng-model="modelSetting.setGlobal.fullScreen">
								</div>
								<div class="setting-every">
									<span>鼠标习惯:</span>
									<div class="mouse-habit">
										<label>
				                    <input type="radio" value="left" name="mouseHabit"
				                           ng-model="modelSetting.setGlobal.mouseHabit"
				                           (change)="ModelSetMouseHabit()" checked>
				                    <span>左键旋转</span>
				                  </label>
										<label>
				                    <input type="radio" value="right" name="mouseHabit"
				                           ng-model="modelSetting.setGlobal.mouseHabit"
				                           (change)="ModelSetMouseHabit()">
				                    <span>右键旋转</span>
				                  </label>

									</div>
								</div>
								<div class="setting-every">
									<span>背景色:</span>
									<div class="bg-color">
										<label>
				                    <span></span>
				                  </label>
									</div>
									<div class="bg-color">
										<div ng-repeat="bgColor in modelSetting.setGlobal.bgColor" 
											class="bg-color-index {{modelSetting.setGlobal.colorIndex==bgColor?'bg-color-active':null}}" 
											ng-click="modelChooseColorIndex(modelSetting.setGlobal, bgColor)">
											<span style="background-color: {{bgColor}}"></span>
										</div>
									</div>
								</div>
								<div class="setting-every setting-every-last">
									<span>渲染帧率:</span>
									<input type="range" min="0" max="100" step="1" ng-model="modelSetting.setGlobal.renders">
									<span>{{modelSetting.setGlobal.renders}}%</span>
								</div>
								<div class="setting-btn setting-margin-top">
									<button ng-click="modelSettingsetGlobalReset()">恢复默认设置</button>
								</div>
							</div>
						</div>
					</div>`,
			link: function($scope, $elem, attrs) {
				$elem.on("click", function() {
					// console.log($elem);
				});
			}
		};
	});
	return appAngular;
});